<template>
	<view view="container">
		<view v-if="isLogin">
			<view class="userinfo">
				<view>
					
					<view class="phone">18888888</view>
					<view>会员积分:333</view>
					<view>普通会员</view>
					<view>
						<button size="mini" @click="logout">退出登录</button>
					</view>
				</view>
				<image src="https://tse2-mm.cn.bing.net/th/id/OIF-C.4MEJbRMvQ2Sa2gGYWzODtA?rs=1&pid=ImgDetMain" mode="">
				</image>
			</view>
			<view class="list">
				<view class="tab">
					<!-- v-for指令来循环渲染导航标签 -->
					<view v-for="(item,i) in navData" :key="i" :class="currentIndex===i?'current':''"
						@click="changeIndex(i)">
						{{item}}
					</view>
				</view>
				<div class="item" v-for="item in 1" :key="item">
					<image src="../../static/t2.png" mode=""></image>
					<view>
						<view>下单时间:2024-03-22:25:20</view>
						<view>订单总额:￥10.0</view>
					</view>
				</div>
				<div class="item" v-for="item in 2" :key="item">
					<image src="../../static/t1.png" mode=""></image>
					<view>
						<view>下单时间:2024-03-22:25:20</view>
						<view>订单总额:￥12.0</view>
					</view>
				</div>
			</view>
		</view>
		<!-- 轮播图 -->
		<view v-else class="">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				indicator-active-color="pink" style="height: 800rpx;">
				<!-- swiper-item 每一项 -->
				<swiper-item v-for=" (item, index) in swiperImageList" :key="index">
					<view class="swiper-item">
						<image :src="item.iurl" mode=""></image>
					</view>
				</swiper-item>

			</swiper>
			<view class="content">
				<view>Wellcome to</view>
				<view>奶茶点食</view>
				<view>源自你的美</view>
			</view>
			<view class="btn">
				<button @click="toLoginPage">登录</button>
				<button @click="toRegisterPage">注册</button>
			</view>

		</view>
	</view>
</template>

<script>
	// 使用Vuex来管理全局状态，这里主要是用户的登录状态（isLogin）。
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			// 作用是创建一个新的对象，这个对象有一个属性isLogin，它的值是Vuex store中isLogin getter的返回值。
			...mapGetters(['isLogin'])
		},
		data() {
			return {
				navData: ["全部订单", "已收货", "未收货", "退订"],

				currentIndex: 0,
				swiperImageList: [{
						iurl: "https://tse3-mm.cn.bing.net/th/id/OIP-C.ROcyDzcgMqChM8xvPJ5HIQHaLH?rs=1&pid=ImgDetMain"
					},
					{
						iurl: "https://tse2-mm.cn.bing.net/th/id/OIP-C.ocJJY2VTRJ3RgIwtiC1nSgHaLb?rs=1&pid=ImgDetMain"
					},
					{
						iurl: "https://img.zcool.cn/community/01gg6c7kwbp4bngdtudtws3136.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100"
					},
					{
						iurl: "https://gd-hbimg.huaban.com/1c6f30d56713c6ca6e46d7beba3a32df7593fa525d66b-ZcB5te_fw658"
					}
				]
			}
		},
		methods: {
			changeIndex(index) {
				this.currentIndex = index
			},
			// 导航到登录页面的方法
			toLoginPage() {
				uni.navigateTo({
					// 使用uni-app的navigateTo方法导航到新页面
					url: "/pages/login/login"
				})
			},

			logout() {
				const vm = this
				// 调用Vuex store的commit方法，触发SET_LOGIN mutation，将登录状态设置为false
				vm.$store.commit('SET_lOGIN', false)
			}
		}
	}
</script>

<style scoped>
	.userinfo {
		height: 260rpx;
		background: orange;
		padding: 50rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.userinfo view {
		line-height: 55rpx;
		color: #999;
	}

	.userinfo image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.userinfo .phone {
		color: #fff;
		font-weight: bold;
	}

	.list {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.tab {
		display: flex;
		justify-content: space-around;
		height: 70rpx;
		align-items: center;
	}

	.tab view {
		border-bottom: 1px solid #f5f5f5;
	}

	.tab .current {
		border-bottom: 1px solid #000;
	}

	.item {
		display: flex;
		padding: 15rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #000;
		align-items: center;
	}

	.item image {
		width: 230rpx;
		height: 150rpx;
	}

	.item view {
		line-height: 50rpx;
	}

	.container {
		background: #f5f5f5;
	}

	.swiper-item {
		height: 100%;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.content {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.content view:nth-child(1),
	.content view:nth-child(3) {
		font-weight: bold;
		font-size: 30rpx;
		color: #48647a
	}

	.content view:nth-child(2) {
		color: #fe8787;
		font-size: 56rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.btn button {
		width: 80%;
		font-weight: bold;
		border-radius: 10px;
	}

	.btn button:nth-child(1) {
		background: #fe8787;
		color: #fff;
	}

	.btn button:nth-child(2) {
		margin-top: 20rpx;
		background: #ffe8e8;
		color: #fe8787;
	}
</style>